<script setup>
import Company from "@/components/Company.vue";
import Footer from "@/components/Footer.vue";
import notfound from "@/assets/image/notfound-logo.svg";
</script>
<template>
  <div class="notfound">
    <Company />
    <div class="notfound-content flex-center">
      <div class="notfound-main">
        <div class="notfound-title">4 0 4</div>
        <div class="notfound-subtitle">
          <img :src="notfound" alt="">
        </div>
        <div class="notfound-description">
          出错了！《页面不存在》找不到指定资源~<router-link to="/">返回首页</router-link>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<style lang='less'>
.notfound {
  height: 100vh;
  .notfound-content {
    height: calc(100vh - 75pt);
    .notfound-main{
      transform: translateY(-50pt);
      text-align: center;
      .notfound-title {
        transform: translateY(80pt) translateX(26pt);
        font-size: 30pt;
        color: #b3035b;
      }
      .notfound-subtitle {
        img {
          height: 300pt;
          width: 400pt;
        }
      }
      .notfound-description {
        padding-top: 20pt;
        a {
          color: #b3035b;
        }
      }
    }
  }
}
</style>